<template>
  <div class="subscribeDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">预订详情</x-header>
    <div class="topHolder"></div>
    <card>
      <div class="card-padding state" slot="content">
        <i class="iconfont" :class="[stateClass,stateTextClass]"></i>
        <br/>
        <span class="stateText">预订状态：<b :class="[stateTextClass]" v-text="stateText"></b></span>
        <br/>
        <div v-if="subscribeDetail.IS_DEPOSIT == 1" class="payedDeposit">
          <span v-text="'本次预订需要缴订金：'"></span>¥ <b v-text="formatCurrency(subscribeDetail.DEPOSIT)"></b> 元<br/>
          <span class="tips" v-if="subscribeDetail.STATE == 8">（未支付订金）</span>
          <span class="tips" v-else>（已支付订金）</span>
        </div>
        <div class="reason">
          <span class="tips" v-if="subscribeDetail.STATE == 2 && subscribeDetail.FAIL_REASON" v-text="'失败原因：' + subscribeDetail.FAIL_REASON"></span>
          <span class="tips" v-if="subscribeDetail.STATE == 3 && subscribeDetail.CANCEL_REASON" v-text="'取消原因：' + subscribeDetail.CANCEL_REASON"></span>
        </div>
      </div>
    </card>
    <group label-width="6em">
      <cell title="预订创建时间" :value="subscribeDetail.CREATE_DATETIME"></cell>
      <cell title="订台类型" v-if="subscribeDetail.SUBSCRIBE_TYPE == 0">普通预订</cell>
      <cell title="订台类型" v-if="subscribeDetail.SUBSCRIBE_TYPE == 1">节日/派对预订</cell>
      <cell title="预约房台类型" :value="subscribeDetail.SUBSCRIBE_ROOM_PLATFORM_TYPE"></cell>
      <cell title="已分配房台" v-if="subscribeDetail.AREA && subscribeDetail.NUMBER && subscribeDetail.ROOM_PLATFORM_TYPE && subscribeDetail.AREA != '' && subscribeDetail.NUMBER != '' && subscribeDetail.ROOM_PLATFORM_TYPE != ''" :value="subscribeDetail.AREA + ' - ' + subscribeDetail.NUMBER +'（' + subscribeDetail.ROOM_PLATFORM_TYPE +'）'"></cell>
      <cell title="已分配房台" v-else :value="'未分配'"></cell>
      <cell title="预订方式" v-if="subscribeDetail.SUBSCRIBE_MODE == 1">自助预订</cell>
      <cell title="预订方式" v-if="subscribeDetail.SUBSCRIBE_MODE == 2">销售预订</cell>
      <cell title="预订方式" v-if="subscribeDetail.SUBSCRIBE_MODE == 3">老板预订</cell>
      <cell title="预订方式" v-if="subscribeDetail.SUBSCRIBE_MODE == 4">股东预订</cell>
      <cell title="预订人" v-if="subscribeDetail.SUBSCRIBE_MODE == 2" :value="subscribeDetail.SUBSCRIBER + ' - ' + subscribeDetail.subscribe_DEPARTMENT"></cell>
      <cell title="预订人" v-if="subscribeDetail.SUBSCRIBE_MODE == 3" :value="'老板 - ' + subscribeDetail.SUBSCRIBER"></cell>
      <cell title="预订人" v-if="subscribeDetail.SUBSCRIBE_MODE == 4" :value="'股东 - ' + subscribeDetail.SUBSCRIBER"></cell>
      <cell title="到店客户名称" :value="subscribeDetail.CUSTOMER_NAME"></cell>
      <cell title="客户手机号" :value="subscribeDetail.PHONE"></cell>
      <cell title="消费人数" :value="subscribeDetail.CONSUMPTION_NUMBER"></cell>
      <cell title="预订时间" :value="subscribeDetail.SUBSCRIBE_DATETIME"></cell>
      <cell title="备注" :value="subscribeDetail.REMARK"></cell>
    </group>
    <box gap="1rem 0.8rem">
      <x-button v-if="showCancelBtn" :gradients="['#FF2719', '#FF61AD']" @click.native="submit" :show-loading="loadingStatus" :disabled="loadingStatus" text="取消预订"></x-button>
      <x-button v-if="showpayBtn" :gradients="['#FF5E3A', '#FF9500']" @click.native="goToPay" :show-loading="loadingStatus" :disabled="loadingStatus" text="继续支付"></x-button>
    </box>
  </div>
</template>

<script>
  import '../../assets/iconfont/iconfont'
  import { Group, Cell, Box, Card, XButton, numberComma } from 'vux'
  import {getSubscribeById,cancelSubscribe} from "../../api";
  import {message,toDecimal2,getLocalStorage} from "../../common/util";

  export default {
    name:'subscribeDetail',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        paramSubscribeId:this.$route.params.subscribeId,
        paramType:this.$route.params.type,
        loadingStatus:true,
        subscribeDetail:{},
        stateText:'',
        stateTextClass:'',
        stateClass:''
      }
    },
    components:{
      Group,
      Cell,
      Box,
      Card,
      XButton
    },
    computed:{
      showCancelBtn(){
        if(this.paramType == 'view') return false
        if(new Date(this.subscribeDetail.SUBSCRIBE_DATETIME).getTime() > new Date().getTime() + 3 * 3600 * 1000){
          if(this.subscribeDetail.STATE == 0 || this.subscribeDetail.STATE == 8) return true
          else return false
        }
      },
      showpayBtn(){
        if(this.paramType == 'view') return false
        if(this.subscribeDetail.IS_DEPOSIT == 1 && this.subscribeDetail.STATE == 8) return true
        else return false
      }
    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      goToPay(){
        this.$router.push({name:'订金支付',params:{subscribeId:this.paramSubscribeId}})
      },
      getState(state){
        switch (state) {
          case 0:this.stateText = '预约待分配';this.stateClass = 'icon-u';this.stateTextClass = 'waiting';break
          case 1:this.stateText = '分配成功';this.stateClass = 'icon-caozuochenggong';this.stateTextClass = 'success';break
          case 2:this.stateText = '预约失败';this.stateClass = 'icon-shibai';this.stateTextClass = 'error';break
          case 3:this.stateText = '取消预约';this.stateClass = 'icon-quxiao';this.stateTextClass = 'cancel';break
          case 4:this.stateText = '已到店';this.stateClass = 'icon-daodiantiyan';this.stateTextClass = 'arrived';break
          case 5:this.stateText = '超时未到店';this.stateClass = 'icon-dengluchaoshi';this.stateTextClass = 'timeout';break
          case 6:this.stateText = '已开单';this.stateClass = 'icon-zonghekaidan';this.stateTextClass = 'opened';break
          case 7:this.stateText = '已点单';this.stateClass = 'icon-gaoxiaofei';this.stateTextClass = 'saled';break
          case 8:this.stateText = '未支付押金';this.stateClass = 'icon-wenzhanghuoke-';this.stateTextClass = 'unpay';break
          case 9:this.stateText = '已结账';this.stateClass = 'icon-yuding1';this.stateTextClass = 'clear';break
          default:this.stateText = '无';this.stateClass = '';this.stateTextClass = '';break
        }
      },
      submit(){
        this.loadingStatus = true
        this.$vux.confirm.show({
          title:'是否取消预订',
          content:'请确认取消预订？',
          onCancel: ()=> {
            this.loadingStatus = false
          },
          onConfirm: ()=> {
            cancelSubscribe(this.paramSubscribeId).then((res)=>{
              if(res.status == 'success'){
                this.$router.go(0)
              }else if(res.status == 'error') {
                message({message:res.msg,type:'error'})
                console.log('cancelSubscribe error info:', res.msg)
              }
              this.loadingStatus = false
              this.$store.commit('updateLoadingStatus',{isLoading:false})
            }).catch((err)=>{console.log('cancelSubscribe catch info:',err)})
          }
        })
      }
    },
    mounted(){
      getSubscribeById(this.paramSubscribeId).then((res)=>{
        if(res.status == 'success'){
          this.getState(res.data.STATE)
          this.subscribeDetail = res.data
          console.log(this.subscribeDetail)
          this.loadingStatus = false
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getSubscribeById error info:', res.msg)
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getSubscribeById catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .subscribeDetail{
    .state{
      text-align: center;
      .iconfont{
        font-size: 5rem;
        &.waiting{color: #ffca10;}
        &.success{color: #0abd39;}
        &.error{color: #ff2623;}
        &.cancel{color: #bebdbb;}
        &.arrived{color: #2775bd;}
        &.timeout{color: #b600ff;}
        &.opened{color: #78d6f5;}
        &.saled{color: #6fbd5b;}
        &.unpay{color: #aa8249;}
      }
      .stateText{
        display:inline-block;margin-top: 1rem;
        b{
          &.waiting{color: #ffca10;}
          &.success{color: #0abd39;}
          &.error{color: #ff2623;}
          &.cancel{color: #bebdbb;}
          &.arrived{color: #2775bd;}
          &.timeout{color: #b600ff;}
          &.opened{color: #78d6f5;}
          &.saled{color: #6fbd5b;}
          &.unpay{color: #aa8249;}
        }
      }
    }
    .payedDeposit,.reason{
      margin-top: 0.5rem;
      .tips{color: #bd2c00;}
    }
  }
</style>
